<template>
  <div class="car" style="margin-bottom:50px;">
            <h2>商品列表</h2>
            <div class="good">
                <table><tr><td width=30%>商品名称</td><td width=20%>单价</td><td width=20%>功效</td><td width=30%>操作</td></tr></table>
            </div>
            <div class="goods" v-for="(item,index) in $store.state.shopcart.list" :key="index">
                <table><tr><td width=30%>{{item.title}}</td><td width=20%>{{item.price}}</td>
                <td width=20%>{{item.power}}</td>
                <td width=30%>
                  <a>
                    <button class="btn1" style="width:100px;" v-show="!item.showcart" @click="add(item)">加入购物车</button>
                    <span style="font-size:14px;color:grey" v-show="item.showcart">已加入购物车</span>
                  </a></td></tr></table>
            </div>
    </div>
    <hello-world></hello-world>
    <div class="car">
            <h2>购物车</h2>
            <div class="good">
                <table><tr><td width=30%>商品名称</td><td width=20%>单价</td><td width=20%>数量</td><td width=30%>操作</td></tr></table>
            </div>
            <div class="goods" v-for="(item,index) in $store.state.shopcart.shopcarList" :key="index">
                <table><tr><td width=30%>{{item.title}}</td><td width=20%>{{item.price}}</td><td width=20%><input type="number" v-model="item.count" style="width: 50px;height:20px;" min="1"/></td><td width=30%><a><button class="btn1" @click="del(item.id)">删除</button></a></td></tr></table>
            </div>
            <div class="goods2">
                <table><tr><td width=300></td><td width=30%>小计：{{$store.getters['shopcart/totalMoney']}}</td><td width=30%>总数：{{$store.state.shopcart.shopcarList.length}}</td></tr></table>
            </div>
            <div class="goods1">
                <table><tr><td width=50%><button class="btn2">确认购买</button></td><td><button class="btn3" @click="$store.commit('shopcart/clear')">全部清空</button></td></tr></table>
            </div>
    </div>
</template>

<script setup>
    import helloWorld from './components/HelloWorld.vue'
    import {useStore} from 'vuex'
    const store = useStore()
    const add = (item) =>{
    store.commit('shopcart/add',item)
    }
    const del = (id) =>{
    store.commit('shopcart/del',id)
    }
</script>

<style>
  body{
                overflow: hidden;
                text-align: center;
            }
            .car{
                width:60%;
                border: 1px solid #F88020;
                border-radius: 18px;
                margin-left: 300px;
            }
            .car .good{
                background-color: #F88020;
                height:55px;
                font-size: 22px;
                color:white;
                line-height: 55px;
                font-weight: 200;
                border-radius: 18px 18px 0 0;
                margin-bottom: 20px;
                
            }
            .car .good table{
                width:100%;
            }
            .car .goods{
                height:45px;
                line-height: 45px;
                font-size: 20px;
                font-weight: 200;
            }
            .car .goods table{
                width:100%;
            }
            .car .goods table .btn1{
                width: 70px;
                height:28px;
                border: 2px solid #46B3E6;
                background-color: white;
                color: #46B3E6;
                border-radius: 4px;
                font-weight: 600;
            }
            .car .goods table button:hover{
                background-color: #46B3E6;
                color: white;
            }
            .car .goods1{
                margin-top: 10px;
                background-color:pink ;
                height:50px;
                font-size: 19px;
                color:white;
                line-height: 50px;
                font-weight: 200;
                border-radius:0 0 10px 10px ;
            }
            .car .goods2{
                border-top: 1px solid #F88020;
                margin-top: 10px;
                height:50px;
                font-size: 19px;
                line-height: 50px;
                font-weight: 200;
                border-radius:0 0 10px 10px ;
            }
            .car .goods1 table{
                width:100%;
            }
            .car .goods1 .btn2{
                width: 80px;
                height:28px;
                border: 2px solid #21BF73;
                background-color: white;
                color: #21BF73;
                border-radius: 4px;
                font-weight: 600;
            }
            .car .goods1 .btn2:hover{
                color:white;
                background-color: #21BF73;
            }
            .car .goods1 .btn3{
                width: 80px;
                height:30px;
                border: 2px solid #FF0000;
                background-color: white;
                color: #FF0000;
                border-radius: 4px;
                font-weight: 600;
            }
            .car .goods1 .btn3:hover{
                color:white;
                background-color:#FF0000 ;
            }
</style>
